<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/main.css}"/>
    <script th:src="@{/layui/layui.all.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
</head>
<body>
<!--轮播图片-->
<div class="layui-carousel" id="test1">
    <div carousel-item="">
        <div><img src="image/lun.jpg" width="100%" height="100%"/></div>
        <div><img src="image/lun2.jpg" width="100%" height="100%"/></div>
        <div><img src="image/13.jpg" width="100%" height="120%"/></div>
    </div>
</div>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , width: '1080px'
            , height: '150px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

<fieldset class="layui-elem-field layui-field-title">
    <legend><span class="" style="font-size: 14px">
        <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
  <span>查寝情况<span class="layui-box">&gt;</span></span>
  <a href="/dor/ruledemo">违规情况<span class="layui-box">&gt;</span></a>
  <span>添加一条违规信息<span class="layui-box">&gt;</span></span>
</span>
    </legend>
</fieldset>
<div class="layui-row">
    <div class="layui-form-item">
        <label class="layui-form-label">违规寝室</label>
        <div style="left: 14px;position: relative">
             <select id="build" class="search_select"></select>
            <select id="room" class="search_select" required="required"></select>
        </div>
    </div>
        <form class="layui-form" method="post" action="/dor/rule" id="mainForm">
            <div class="layui-form-item">

                <input id="r_id" name="R_id" hidden="hidden"/>

                </div>
            <div class="layui-form-item">
                <label class="layui-form-label">违规详情</label>
                <div class="layui-input-block">
                    <textarea type="text" name="descript"  autocomplete="off" lay-verify="required" required="required" class="layui-input"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">违规日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" autocomplete="off" class="layui-input"  required="required" id="test"/>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn"  lay-filter="add_user" type="button" id="submitBtn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
<script th:inline="javascript">
    var flag = [[${flag}]];
    if (flag === 1){
        console.log("flag:"+flag)
        layer.open({
            content: '添加成功'
        });
    }
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test'
            ,format: 'yyyy/MM/dd'
        });
    });
</script>
<script>

    //寝室号一定要填
    $("#submitBtn").on('click', function () {
        var room  = $("#room").val()
        var build = $("#build").val()
        console.log(room+" : "+build)
        if(room==='' || build === '选择楼栋'){
            layer.msg('请输入正确的寝室相关信息！')
        }else{
            $("#submitBtn").attr('type', 'submit');
        }
//
    });


    $.get('/dor/build', function (data) {
//        console.log(data)
        buildList = '<option hidden="hidden">选择楼栋</option>'
        data.forEach(function (value) {
//            console.log(value)
            buildList+='<option>'+value.build_id+'</option>'
        })
//        console.log(buildList)
        $("#build").html(buildList)
    })

    $("#build").on('click', function () {
        var build = $("#build").val()
        console.log('0'+build)
        $.get('/dor/rooms/'+build, function (data) {
//        console.log(data)
            buildList = '<option hidden="hidden"></option>'
            data.forEach(function (value) {
//            console.log(value)
                buildList+='<option value="'+value.id+'">'+value.room_id+'</option>'
            })
//            console.log(buildList)
            $("#room").html(buildList)
        })
    })
    /*<![CDATA[*/
   /* $("#submitScore").on('click', function () {
        roomid = $("#room").val()
        ranks = $("#rank").val()
        date = $("#test2").val()

        $.get('/dor/addHealth?id='+roomid+'&rank='+ranks+'&date='+date, function (data) {
//            console.log(data)
            if(data==='Already'){
                layer.msg('你已经添加该寝室今天的卫生情况')
            }else{
                layer.msg('添加成功，请继续添加')
            }

        })
    })*/

    var date = new Date()
    var years = date.getYear()+1900;
    var month = date.getMonth()+1
    var day = date.getDate()
    var result = years+"/"+month+"/"+day;
    //    console.log(result)
    $("#test2").val(result)


   /* 寝室编号的拼接*/
    var build;
    var room;
    $('#build').change(function () {
        build = $('#build').val();
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
        }
    })
    $('#room').change(function () {
        room = $('#room').val()
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
        }
    })
    /*]]>*/
</script>

</body>
</html>